import {computed,designPage, getComponentCls, iMouseEvent, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {$message, Adc, AdcGroup, AdcInput, AntdTable, Button} from "../../../../packages";
import DATA from '../../../data/data-1.json';
import {deepcopy} from "plain-utils/object/deepcopy";
import {iAdcColumn} from "../../../../packages/components/AntdTable/adc/adc.utils";
import {iAdtNode} from "../../../../packages/components/AntdTable/utils/antd-table.utils";
import {AdcSwitch} from "../../../../packages/components/AdcSwitch";

export const demo1 = designPage(() => {

  const state = reactive({
    dataSource: deepcopy(DATA),
    editNodes: [] as iAdtNode[]
  });

  const handler = {
    onClickCell: (data: any, e: iMouseEvent, adc: iAdcColumn) => {
      console.log('click cell', data[adc.props.dataIndex as string]);
    },
    onRowDoubleClick: ({ node }: { node: iAdtNode }) => {
      node.enableEdit();
      state.editNodes.findIndex(i => i.state.index === node.state.index) === -1 && state.editNodes.push(node);
    },
    save: async () => {
      const validates = (await Promise.all(state.editNodes.map(node => node.validate()))).filter(Boolean);
      if (validates.length > 0) {
        console.log(validates);
        const { validateResultData, node: { state: { index } } } = validates[0]!;
        $message.error(`第${index + 1}条记录校验不通过，${validateResultData[0].label}:${validateResultData[0].message}`);
        return;
      }
      // todo 网络保存逻辑
      state.editNodes.forEach(tableNode => tableNode.saveEdit(tableNode.state.editRow));
      state.editNodes.forEach(tableNode => tableNode.closeEdit());
      state.editNodes = [];
    },
    cancel: () => {
      state.editNodes.forEach(tableNode => {
        tableNode.cancelEdit();
      });
      state.editNodes = [];
    },
  };

  const isDisabledOperation = computed(() => state.editNodes.length === 0);

  return () => (
    <DemoRow title="基本用法">
      <div className={getComponentCls('antd-table-outer-operation')}>
        <Button label="取消" disabled={isDisabledOperation.value} onClick={handler.cancel}/>
        <Button label="保存" type="primary" disabled={isDisabledOperation.value} onClick={handler.save}/>
      </div>
      <AntdTable
        dataSource={state.dataSource}
        onRowDoubleClick={handler.onRowDoubleClick}
        showRows={10}
      >
        <Adc title={'普通文本列'} dataIndex={'id'} onCellClick={handler.onClickCell}/>
        <Adc title={'设置宽度'} dataIndex={'id'}/>
        <AdcInput title={'大小'} dataIndex={'size'} onCellClick={handler.onClickCell}/>
        <AdcGroup title="联系方式">
          <AdcInput title={'地址'} dataIndex={'addr'} onCellClick={handler.onClickCell}/>
          <AdcInput title={'链接'} dataIndex={'url'} overflowTooltip/>
        </AdcGroup>
        <AdcGroup title={'地址'}>
          <AdcInput dataIndex="date" title="日期"/>
          <AdcInput dataIndex="name" title="名称"/>
          <AdcInput dataIndex="color" title="颜色"/>
          <AdcSwitch dataIndex="flag" title="开关"/>
        </AdcGroup>
      </AntdTable>
    </DemoRow>
  );
});
